<div class="welcome-main">

  <div class="welcome-title">
    <div class="row" *ngIf="projects">
      <div class="col-lg-2 col-md-1 col-sm-1 col-xs-1"></div>
      <div class="col-lg-3 col-md-4 col-sm-4 countPart">
        <h3>{{personalNum}}</h3>
        <p>PERSONAL PROJECTS</p>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2"></div>
      <div class="col-lg-3 col-md-4 col-sm-4 countPart">
        <h3>{{participatingNum}}</h3>
        <p>PARTICIPATING PROJECTS</p>
      </div>
      <div class="col-lg-2 col-md-1 col-sm-1"></div>
    </div>
  </div>

  <hr/>

  <div class="row welcome-pro">
    <div class="row content-Title">
      <svg t="1504607519252" class="icon" fill="#4d4d4d" style="" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="5387" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
           height="20">
        <defs>
          <style type="text/css"></style>
        </defs>
        <path
          d="M571.733 322.56H196.267a15.296 15.296 0 0 1-15.36-15.36v-5.12c0-8.533 6.826-15.36 15.36-15.36h375.466c8.534 0 15.36 6.827 15.36 15.36v5.12c0 8.533-6.826 15.36-15.36 15.36zM628.053 303.787a18.773 18.773 0 1 0 37.547 0 18.773 18.773 0 1 0-37.547 0z m46.08-134.827h-486.4c-63.146 0-116.053 51.2-116.053 116.053v592.214c0 63.146 51.2 116.053 116.053 116.053h486.4c63.147 0 116.054-51.2 116.054-116.053V285.013c0-64.853-52.907-116.053-116.054-116.053z m-486.4 58.027h486.4c32.427 0 58.027 25.6 58.027 58.026v75.094H131.413v-75.094c0-32.426 25.6-58.026 56.32-58.026z m486.4 708.266h-486.4c-32.426 0-58.026-25.6-58.026-58.026V409.6h600.746v467.627c0 32.426-25.6 58.026-56.32 58.026zM834.56 30.72h-486.4c-63.147 0-116.053 51.2-116.053 116.053v22.187h58.026v-22.187c0-32.426 25.6-58.026 58.027-58.026h486.4c32.427 0 58.027 25.6 58.027 58.026v592.214c0 32.426-25.6 58.026-58.027 58.026h-46.08v58.027h46.08c63.147 0 116.053-51.2 116.053-116.053V146.773c0-64.853-51.2-116.053-116.053-116.053z"
          p-id="5388">
        </path>
      </svg>
      <p>所有项目</p>
      <div class="project-variety">
        <mat-chip-list>
          <mat-chip>全部</mat-chip>
          <mat-chip color="primary" selected="true" (click)="getFish()">我创建的</mat-chip>
          <mat-chip color="accent" selected="true" (click)="getAccdent()">我参与的</mat-chip>
        </mat-chip-list>
      </div>
    </div>
    <div [style.width]="'100%'">
      <ul>
        <li *ngFor="let project of projects.data" class="proItem">
          <div class="proItem-Content" [ngClass]="{'join': project?.role === 'pm' ? false : true}" (click)="getProject(project)">
            <h3>{{project?.name}}</h3>
            <div class="proItem-Content-footer">
              <p>{{project?.detail}}</p>
              <p>{{project?.role | positionSwitch}}</p>
            </div>
          </div>
        </li>
<!--
        <li class="proItem" *ngIf="projects?.total > 6" routerLink="/pages/resource/projectMan">
          <div class="proItem-Content">
            <h3>更多项目</h3>
            <p> ... </p>
          </div>
        </li> -->
        <li class="proItem" (click)="createPro()">
          <div class="proItem-addMain">
            <div class="proItem-addSvg">
              <svg fill="#ffffff" height="80" viewBox="0 0 24 24" width="80" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
            </div>
          </div>
        </li>
      </ul>

    </div>
  </div>

  <!--<div >-->
    <!--<div class="row content-Title">-->
      <!--<svg t="1504607411013" fill="#4d4d4d" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"-->
           <!--xmlns="http://www.w3.org/2000/svg" p-id="2429" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"-->
           <!--height="20">-->
        <!--<defs>-->
          <!--<style type="text/css"></style>-->
        <!--</defs>-->
        <!--<path-->
          <!--d="M179.200422 216.422804C179.200422 159.744432 224.6148 113.766855 281.600371 113.766855h349.900625a102.399949 102.399949 0 0 1 102.399949 102.655949v704.921247a102.246349 102.246349 0 0 1-102.399949 102.655949H281.600371a102.399949 102.399949 0 0 1-102.399949-102.655949V216.422804z m102.399949 51.251174a51.046374 51.046374 0 0 1 51.353575-51.507174h255.692672A51.199974 51.199974 0 0 1 640.000192 267.673978v477.286162a51.046374 51.046374 0 0 1-51.353574 51.507174H332.953946A51.199974 51.199974 0 0 1 281.600371 744.96014V267.673978z m174.950313 699.39165c30.617585 0 55.449572-25.446387 55.449572-56.831971 0-31.436784-24.831988-56.883172-55.449572-56.883172-30.668785 0-55.500772 25.446387-55.500773 56.831972 0 31.436784 24.831988 56.934372 55.500773 56.934371z"-->
          <!--p-id="2430"></path>-->
        <!--<path-->
          <!--d="M280.627572 58.368483A102.143949 102.143949 0 0 1 373.043525 0.000512h364.031818c56.473572 0 102.297549 46.284777 102.297549 102.553549v728.063636a102.399949 102.399949 0 0 1-56.883171 91.955154V109.824457c0-28.415986-22.937589-51.507174-51.199975-51.507174H280.627572z"-->
          <!--p-id="2431">-->
        <!--</path>-->
      <!--</svg>-->
      <!--<p>所有任务</p>-->
    <!--</div>-->
    <!--<div>-->
      <!--<ngx-datatable-->
        <!--class="material"-->
        <!--[rows]="taskList?.data"-->
        <!--[columnMode]="'force'"-->
        <!--[headerHeight]="50"-->
        <!--[footerHeight]="50"-->
        <!--[rowHeight]="'auto'"-->
        <!--[limit]="8">-->
        <!--<ngx-datatable-column name="ID" prop="id" [width]="100">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="任务名称" prop="title" [width]="100">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="任务状态" prop="status" [width]="100">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="任务等级" prop="level" [width]="100">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="创建者" prop="ownerName" [width]="70">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="完成者" prop="memberName" [width]="70">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
        <!--<ngx-datatable-column name="创建时间" prop="createAt" [width]="70">-->
          <!--<ng-template let-value="value" ngx-datatable-cell-template>-->
            <!--{{value}}-->
          <!--</ng-template>-->
        <!--</ngx-datatable-column>-->
      <!--</ngx-datatable>-->
    <!--</div>-->
  <!--</div>-->
</div>
